
{% extends "base.html" %}
{% load thumbnail %}
{% block title %}{{ user.get_full_name }}{% endblock %}
{% block content %}
    <h1>{{ user.get_full_name }}</h1>
    <div class="profile-info">
    {% thumbnail user.profile.photo "180x180" crop="100%" as im %}
        <img src="{{ im.url }}">
    {% endthumbnail %}
    </div>
    {% with total_followers=user.followers.count%}
    <span class="count">
        <span class="total">{{ total_followers }}</span>
        follower{{ total_followers|pluralize }}
    </span>
    <a href="#" data-id="{{ user.id }}" data-action="{% if request.user in user.followers.all %}un{% endif %}follow" class="follow button">
        {% if request.user not in user.followers.all %}
            Follow
        {% else %}
            Unfollow
        {% endif %}
    </a>
    <div id="image-list" class="image-container">
        {% include "images/image/list_ajax.html" with images=user.images_created.all %}
    </div>
    {% endwith %}
{% endblock %}
{% block domready %}
$('a.follow').click(function (e) {
    e.preventDefault();
       $.post('/account/users/follow/',
         {
           id: $(this).data('id'),
           action: $(this).data('action')
         },
         function(data){
           if (data['status'] == 'ok') {
             var previous_action = $('a.follow').data('action');

             // toggle data-action
             $('a.follow').data('action',
               previous_action == 'follow' ? 'unfollow' : 'follow');
             // toggle link text
             $('a.follow').text(
               previous_action == 'follow' ? 'Unfollow' : 'Follow');

             // update total followers
             var previous_followers = parseInt(
               $('span.count .total').text());
             $('span.count .total').text(previous_action == 'follow' ? previous_followers + 1 : previous_followers - 1);
             previous_followers = parseInt(
               $('span.count .total').text());
             $('span.count ').html(previous_followers == 1 ? '<span class="total">1 </span>follower':'<span class="total">'+ previous_followers+"</span> followers")
          }
        });
})
{% endblock %}